<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .b {
        border: 1px solid #000;
      }

      .flex {
        display: flex;
      }

      .row {
        display: flex;
        margin-bottom: 10px;
        position: relative;
      }

      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 60px auto;
        padding: 12px;
        width: 800px;
      }

      .title {
        width: 100px;
        font-size: 16px;
        text-align: right;
      }

      .content {
        width: 250px;
      }

      .tips {
        position: absolute;
        left: 362px;
        color: red;
        white-space: nowrap;
        max-width: 200px;
        overflow: hidden;
      }

      .number .content {
        position: relative;
        font-weight: 700;
      }

      .number .content::before {
        position: absolute;
        bottom: 14px;
        left: -2px;
        content: "";
        width: 0;
        height: 0;
        border-top: 10px solid green;
        border-right: 10px solid transparent;
      }

      .sex label {
        margin-right: 8px;
      }

      .sex input {
        position: relative;
        top: 2px;
        margin-right: 0px;
        width: 16px;
        height: 16px;
        border: 2px solid #000;
        transition: 0.2s all linear;
        outline: none;
        appearance: none;
        border-radius: 50%;
      }

      .sex input:checked {
        border: 8px solid #000;
      }

      .name input,
      .password input,
      .email input,
      .color input,
      .birthday input {
        width: 100%;
        border: 2px solid #000;
      }

      .name input,
      .password input,
      .email input {
        padding: 6px 6px;
      }

      .birthday input {
        padding: 4px 6px;
      }

      .address select {
        width: 48%;
        padding: 6px 6px;
        border: 2px solid #000;
        appearance: none;
        background: url("http://ourjs.github.io/static/2015/arrow.png")
          no-repeat scroll right center transparent;
        padding-right: 14px;
      }

      .address select:nth-child(2) {
        margin-left: 8%;
      }

      .hobby .row {
        align-items: center;
      }

      .hobby label {
        position: relative;
        line-height: 135%;
        cursor: pointer;
        margin-left: 6px;
      }

      .hobby input {
        position: relative;
        top: -0.375rem;
        margin: 0 1rem 0 0;
        cursor: pointer;
      }

      .hobby input:before {
        transition: all 0.3s ease-in-out;
        content: "";
        position: absolute;
        left: 10px;
        top: 4px;
        z-index: 1;
        width: 1rem;
        height: 1rem;
        border: 2px solid #000;
      }

      .hobby input:checked:before {
        transform: rotate(-45deg);
        height: 0.5rem;
        border-color: #000;
        border-top-style: none;
        border-right-style: none;
      }

      .hobby input:after {
        content: "";
        position: absolute;
        top: -0.125rem;
        left: 0;
        width: 1.1rem;
        height: 1.1rem;
        background: #fff;
        cursor: pointer;
      }

      .hobby .row input:not(:first-of-type) {
        margin-left: 8px;
      }

      .photos .content {
        overflow: visible;
        white-space: nowrap;
      }

      .photos label {
        display: inline-block;
        width: 120px;
        height: 80px;
        line-height: 80px;
        background-color: #a5a5a5;
        text-align: center;
        color: #e6e6e6;
        border: 2px solid #878787;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        cursor: pointer;
      }

      .photos label:not(:first-of-type) {
        margin-left: 6px;
      }

      .photos input {
        display: none;
      }

      .self-evaluation textarea {
        width: 100%;
        padding: 6px;
        border: 2px solid #000;
        font-size: 14px;
      }

      .button-group .content {
        justify-content: space-evenly;
      }

      .button-group input {
        padding: 6px 18px;
        background-color: #a9a9a9;
        background-image: linear-gradient(#bebcbc #9c9b9b);
        font-size: 16px;
        color: #e6e6e6;
        box-shadow: 0 4px 4px #a9a9a9;
        border: none;
        outline: none;
        border-radius: 4px;
        font-family: "楷体";
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <form action="">
        <div class="row number">
          <div class="title">编号：</div>
          <div class="content">201053010618</div>
        </div>
        <div class="row name">
          <div class="title">姓名：</div>
          <div class="content">
            <input type="text" placeholder="请输入您的姓名" />
          </div>
          <div class="tips"></div>
        </div>
        <div class="row password">
          <div class="title">密码：</div>
          <div class="content"><input type="password" /></div>
          <div class="tips"></div>
        </div>
        <div class="row sex">
          <div class="title">性别：</div>
          <div class="content">
            <input type="radio" checked value="male" name="sex" id="male" />
            <label for="male">男</label>
            <input type="radio" name="sex" value="famale" id="famale" />
            <label for="famale">女</label>
          </div>
        </div>
        <div class="row birthday">
          <div class="title">生日：</div>
          <div class="content"><input type="date" /></div>
        </div>
        <div class="row email">
          <div class="title">邮箱：</div>
          <div class="content"><input type="email" /></div>
        </div>
        <div class="row hobby">
          <div class="title">兴趣：</div>
          <div class="content">
            <div class="row">
              <input type="checkbox" value="movie" name="movie" id="movie" />
              <label for="movie">电影</label>
              <input type="checkbox" value="travel" name="travel" id="travel" />
              <label for="travel">旅游</label>
              <input type="checkbox" value="music" name="music" id="music" />
              <label for="music">音乐</label>
            </div>
            <div class="row">
              <input type="checkbox" value="game" name="game" id="game" />
              <label for="game">游戏</label>
              <input type="checkbox" value="sports" name="sports" id="sports" />
              <label for="sports">体育</label>
              <input type="checkbox" value="read" name="read" id="read" />
              <label for="read">读书</label>
            </div>
          </div>
        </div>
        <div class="row address">
          <div class="title">住址：</div>
          <div class="content flex">
            <select id="cmbProvince" name="cmbProvince"></select>
            <select id="cmbCity" name="cmbCity"></select>
          </div>
        </div>
        <div class="row color">
          <div class="title">幸运色：</div>
          <div class="content"><input type="color" /></div>
        </div>
        <div class="row photos">
          <div class="title">照片：</div>
          <div class="content">
            <label for="file1">图片1</label>
            <input type="file" id="file1" name="file1" />
            <label for="file2">图片2</label>
            <input type="file" id="file2" name="file2" />
            <label for="file3">图片3</label>
            <input type="file" id="file3" name="file3" />
          </div>
        </div>
        <div class="row self-evaluation">
          <div class="title"></div>
          <div class="content">
            <textarea
              placeholder="自我评价"
              name=""
              id=""
              cols="30"
              rows="6"
            ></textarea>
          </div>
        </div>
        <div class="row button-group">
          <div class="title"></div>
          <div class="content flex">
            <input class="submit" type="button" value="提交" />
            <input class="reset" type="reset" value="重写" />
          </div>
        </div>
      </form>
    </div>

    <script>
      $(() => {
        const formData = {
          number: "",
          name: "",
          sex: "",
          birthday: "",
          email: "",
          hobby: [],
          address: "",
          selfEvaluation: "",
        };

        const handleNumber = () => {
          const number = $(".number .content").text();
          formData.number = number;
        };

        const handleName = () => {
          const tips = $(".name .tips");
          const name = $(".name input").val();
          !name.length && tips.text("用户名不能为空");
          if (!tips.text().length) {
            formData.name = name;
          }
        };

        const handleChangeName = () => {
          const tips = $(".name .tips");
          $(".name input").change(function () {
            const name = $(this).val();
            name.length ? tips.text("") : tips.text("用户名不能为空");
          });
        };

        const handlePassword = () => {
          const password = $(".password input").val();
          const tips = $(".password .tips");
          !password.length && tips.text("密码不能为空");
          formData.password = password;
        };

        const handleChangePassword = () => {
          const tips = $(".password .tips");
          $(".password input").change(function () {
            const password = $(this).val();
            password.length < 6 || password.length > 20
              ? tips.text("密码长度为6-20个字符")
              : tips.text("");
          });
        };

        const handleBirthday = () => {
          const birthday = $(".birthday input").val();
          if (!birthday.length) return;
          formData.birthday = birthday;
        };

        const handleSex = () => {
          let sex = $(".sex input:radio:checked").val();
          sex = sex === "male" ? "男" : "女";
          formData.sex = sex;
        };

        const handleEmail = () => {
          let email = $(".email input").val();
          formData.email = email;
        };

        const handleHobby = () => {
          let hobby = [];
          const hobbyMap = {
            movie: "电影",
            travel: "旅行",
            music: "音乐",
            game: "游戏",
            sports: "体育",
            read: "读书",
          };

          $(".hobby input:checkbox:checked").each(function (i) {
            let value = $(this).val();
            hobby[i] = hobbyMap[value];
          });

          formData.hobby = hobby;
        };

        const initAdress = () => {
          const data = [
            {
              province: "湖北省",
              cities: ["武汉市", "黄冈市", "襄阳市", "荆州市"],
            },
            {
              province: "山东省",
              cities: ["临沂市", "潍坊市", "威海市", "济南市"],
            },
          ];

          const getCurrentCities = (currentProvince) =>
            data.filter((item) => item.province === currentProvince)[0].cities;

          const provinces = data.map((item) => item.province);

          provinces.forEach((item) => {
            $(".address select:nth-child(1)").append(
              `<option value="${item}">${item}</option>`
            );
          });

          const currentProvince = provinces[0];
          const currentCities = getCurrentCities(currentProvince);

          const renderCitiesSelector = (cities) => {
            $(".address select:nth-child(2)").empty();
            cities.forEach((item) => {
              $(".address select:nth-child(2)").append(
                `<option value="${item}">${item}</option>`
              );
            });
          };

          renderCitiesSelector(currentCities);

          $(".address select:nth-child(1)").change(function (e) {
            const currentProvince = $(
              ".address select:nth-child(1) option:selected"
            ).val();
            const currentCities = getCurrentCities(currentProvince);
            renderCitiesSelector(currentCities);
          });

          // let adress = $('.adress input').val();
          // formData.adress = adress;
        };

        const handleAddress = () => {
          const province = $(
            ".address select:nth-child(1) option:selected"
          ).val();
          const city = $(".address select:nth-child(2) option:selected").val();
          formData.address = `${province}-${city}`;
        };

        const handleColor = () => {
          $(".color input").change(function () {
            const color = $(this).val();
            $("body").css("background", color);
            if ($(".custom-checkbox").length) {
              $(".custom-checkbox").remove();
            }
            $("head").append(
              `<style class="custom-checkbox">.hobby input:after{background:${color}}</style>`
            );
          });
        };

        const handlePhotos = () => {
          $(".photos input").change(function (event) {
            const file = event.target.files[0];
            const URL = window.URL || window.webkitURL;
            const imgUrl = URL.createObjectURL(file);
            const inputId = $(this).attr("id");
            const currentLabel = $(this).siblings(`label[for="${inputId}"]`);

            currentLabel.css({
              color: "transparent",
              backgroundImage: `url(${imgUrl})`,
            });
          });
        };

        const handleLog = () => {
          const {
            number,
            name,
            sex,
            birthday,
            email,
            hobby,
            address,
            selfEvaluation,
          } = formData;

          const data = [
            {
              title: "编号",
              value: number,
            },
            {
              title: "姓名",
              value: name,
            },
            {
              title: "性别",
              value: sex,
            },
            {
              title: "生日",
              value: birthday,
            },
            {
              title: "邮箱",
              value: email,
            },
            {
              title: "兴趣",
              value: hobby,
            },
            {
              title: "住址",
              value: address,
            },
            {
              title: "评价",
              value: selfEvaluation,
            },
          ];

          for (const { title, value } of data) {
            if (Array.isArray(value)) {
              console.log(`${title}：`, value.join(","));
              continue;
            }
            console.log(`${title}：`, value);
          }
        };

        const handleSelfEvaluation = () => {
          let selfEvaluation = $(".self-evaluation textarea").val();
          formData.selfEvaluation = selfEvaluation;
        };

        const listenToclear = () => {
          $(".reset").click(() => {
            $(".tips").text("");
            $(".photos label").css({
              color: "#e6e6e6",
              backgroundImage: "none",
            });
          });
        };

        const handleSubmit = () => {
          $(".submit").click(function () {
            handleNumber();
            handleName();
            handlePassword();
            handleBirthday();
            handleSex();
            handleEmail();
            handleHobby();
            handleAddress();
            handleSelfEvaluation();
            handleLog();
          });
        };

        (() => {
          handleSubmit();
          initAdress();
          handleColor();
          handlePhotos();
          listenToclear();
          handleChangeName();
          handleChangePassword();
        })();
      });
    </script>
  </body>
</html>
